<template>
  <div id="search">
    <div class="searchgood">
      <!-- 顶部 -->
      <div class="top">
        <div class="top-top">
          <div class="top-top-backBtn">
            <span @click="gotoHome()">
              <i>
                <svg
                  t="1734008920120"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="4263"
                  width="16"
                  height="16"
                >
                  <path
                    d="M748.8 160 390.4 512l358.4 352c19.2 19.2 19.2 57.6 0 76.8-19.2 19.2-57.6 19.2-76.8 0L281.6 556.8c0 0-6.4 0-6.4-6.4C262.4 544 256 524.8 256 512c0-12.8 6.4-32 19.2-38.4 0 0 6.4 0 6.4-6.4l390.4-390.4c19.2-19.2 57.6-19.2 76.8 0C774.4 102.4 774.4 134.4 748.8 160z"
                    fill="#515151"
                    p-id="4264"
                  ></path>
                </svg></i>
            </span>
          </div>
          <div class="title">
            <div class="image">
              <img :src="storeimg" />
            </div>
          </div>
        </div>
        <div class="site-box">
          <div class="left" is-link @click="showPopup()">
            <div class="siteText">
              <span>{{ storename }}</span>
            </div>
            <div class="siteImage">
              <img src="https://mall.leyifan.com/static/h5/new_images/icon_transfer.png" alt="" />
            </div>
          </div>
          <div class="right">
            <div class="inp-svg">
              <img
                src="https://mall.leyifan.com/static/h5/new_images/search_input_icon.png"
                alt=""
              />
            </div>
            <div class="uni-input-placeholder">
              <input
                type="text"
                placeholder="输入关键词, 商品ID或网址"
                v-model="inputValue"
                @keydown.enter="searchfun()"
              />
            </div>
          </div>
        </div>
        <div class="top-bottom">
          <div class="tablist" v-if="!isShow"></div>
        </div>
      </div>
      <!-- 中间 -->
      <div style="margin-top: 120rem" v-if="isShow">
        <!-- 翻译 -->
        <div class="tanslate-box">
          <div class="uni-list" v-if="isShow">
            <li>
              <span>开启「自动翻译」，可输入中文搜索商品</span>
              <div class="button">
                <van-switch
                  v-model="checked"
                  active-color="#ff7587"
                  inactive-color=""
                  size="14rem"
                />
              </div>
            </li>
            <li>
              <span>开启「只显示在售」，将过滤掉售罄商品</span>
              <div class="button">
                <van-switch
                  v-model="checked1"
                  active-color="#ff7587"
                  inactive-color=""
                  size="14rem"
                />
              </div>
            </li>
          </div>
        </div>
        <!-- 热门搜索 -->
        <div class="scroll_view">
          <div class="scroll_view_content">
            <div v-if="isSearch">
              <!-- 历史记录 -->
              <div class="title">
                <div class="left">
                  <div class="img">
                    <img
                      src="https://mall.leyifan.com/static/h5/new_images/icon_clock.png"
                      alt=""
                    />
                  </div>
                  <div class="text">
                    <span>历史记录</span>
                  </div>
                </div>
                <div class="right" @click="clearHistory()">
                  <img src="https://mall.leyifan.com/static/h5/new_images/icon_del.png" alt="" />
                </div>
              </div>
              <!-- 历史记录列表 -->
              <div class="list">
                <!-- https://mall.leyifan.com/static/h5/new_images/search_hot.png -->
                <!-- <li v-for="(item, index) in list.slice(0, 3)" :key="index">{{ item.title }}</li> -->
                <div class="list-item" v-for="(item, index) in historyList" :key="index">
                  <li @click="handleHotSearch(item)">
                    {{ item }}
                  </li>
                  <span @click="removeHistoryItem(item)">x</span>
                </div>
              </div>
            </div>
            <!-- 热门搜索 -->
            <div class="title">
              <div class="left">
                <div class="img">
                  <img src="https://mall.leyifan.com/static/h5/new_images/icon_hot.png" alt="" />
                </div>
                <div class="text">
                  <span>热门搜索</span>
                </div>
              </div>
            </div>
            <!-- 热门搜索列表 -->
            <div class="list">
              <!-- https://mall.leyifan.com/static/h5/new_images/search_hot.png -->
              <!-- <li v-for="(item, index) in list.slice(0, 3)" :key="index">{{ item.title }}</li> -->
              <li
                v-for="(item, index) in list"
                :key="index"
                :class="{ 'hot-item': index < 3 }"
                @click="handleHotSearch(item.title)"
              >
                {{ item.title }}
              </li>
            </div>
          </div>
        </div>
      </div>
      <!-- 搜索列表 -->
      <div class="listItem" v-if="!isShow">
        <van-tabs v-model:active="active" @change="onTabChange">
          <van-tab title="推荐">
            <div class="tanslate-row">
              <li>开启「自动翻译」，可输入中文搜索商品</li>
              <li>未开启关键词翻译，以原文【呪術廻戦】搜索</li>
            </div>
            <div class="box" v-if="searchlist.length">
              <HomeCommendItem
                v-for="(item, index) in searchlist"
                :key="index"
                :item="item"
                class="thisitem"
                style="margin-left: 14rem"
              ></HomeCommendItem>
            </div>
            <div class="box2" v-else>
              <div class="imgIcon">
                <img src="https://mall.leyifan.com/static/h5/new_images/empty.png" alt="" />
                <span>暂无数据</span>
              </div>
            </div>
          </van-tab>
          <van-tab title="人气">
            <div class="tanslate-row">
              <li>开启「自动翻译」，可输入中文搜索商品</li>
              <li>未开启关键词翻译，以原文【呪術廻戦】搜索</li>
            </div>
            <div class="box" v-if="searchlist2.length">
              <HomeCommendItem
                v-for="(item, index) in searchlist2"
                :key="index"
                :item="item"
                class="thisitem"
                style="margin-left: 14rem"
              ></HomeCommendItem>
            </div>
            <div class="box2" v-else>
              <div class="imgIcon">
                <img src="https://mall.leyifan.com/static/h5/new_images/empty.png" alt="" />
                <span>暂无数据</span>
              </div>
            </div>
          </van-tab>
          <van-tab title="最新">
            <div class="tanslate-row">
              <li>开启「自动翻译」，可输入中文搜索商品</li>
              <li>未开启关键词翻译，以原文【呪術廻戦】搜索</li>
            </div>
            <div class="box" v-if="searchlist3.length">
              <HomeCommendItem
                v-for="(item, index) in searchlist3"
                :key="index"
                :item="item"
                class="thisitem"
                style="margin-left: 14rem"
              ></HomeCommendItem>
            </div>
            <div class="box2" v-else>
              <div class="imgIcon">
                <img src="https://mall.leyifan.com/static/h5/new_images/empty.png" alt="" />
                <span>暂无数据</span>
              </div>
            </div>
          </van-tab>
          <van-tab title="价格">
            <div class="tanslate-row">
              <li>开启「自动翻译」，可输入中文搜索商品</li>
              <li>未开启关键词翻译，以原文【呪術廻戦】搜索</li>
            </div>
            <div class="box" v-if="searchlist4.length">
              <HomeCommendItem
                v-for="(item, index) in searchlist4"
                :key="index"
                :item="item"
                class="thisitem"
                style="margin-left: 14rem"
              ></HomeCommendItem>
            </div>
            <div class="box2" v-else>
              <div class="imgIcon">
                <img src="https://mall.leyifan.com/static/h5/new_images/empty.png" alt="" />
                <span>暂无数据</span>
              </div>
            </div>
          </van-tab>
        </van-tabs>

        <div class="crmeb-empty"></div>
      </div>
      <!-- 右侧弹出框 -->
      <van-popup v-model:show="showLeft" position="right" :style="{ width: '80%', height: '100%' }">
        <div class="popup-box">
          <div class="title">
            <div class="left">
              <i
                ><svg
                  t="1734055491466"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="5953"
                  width="16"
                  height="16"
                >
                  <path
                    d="M748.8 160 390.4 512l358.4 352c19.2 19.2 19.2 57.6 0 76.8-19.2 19.2-57.6 19.2-76.8 0L281.6 556.8c0 0-6.4 0-6.4-6.4C262.4 544 256 524.8 256 512c0-12.8 6.4-32 19.2-38.4 0 0 6.4 0 6.4-6.4l390.4-390.4c19.2-19.2 57.6-19.2 76.8 0C774.4 102.4 774.4 134.4 748.8 160z"
                    fill="#515151"
                    p-id="5954"
                  ></path></svg
              ></i>
            </div>
            <div class="name">站点</div>
            <div class="seat"></div>
          </div>
          <div class="scroll-view-box">
            <ul>
              <li
                v-for="(item, index) in siteList.slice(0, 11)"
                :key="index"
                @click="storefun(item.Text, item.headText, item.headImage)"
              >
                <img
                  :src="`https://mall.leyifan.com/static/h5/new_images/site_bg_${index + 1}.png`"
                  alt=""
                />
                <div v-if="index === siteList.length - 2" class="tag">公测中</div>
                <span>{{ item.introduce }}</span>
              </li>
            </ul>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, createApp, computed } from 'vue'
import axios from '@/api/axios'
import { Popup, showToast, Switch } from 'vant'
import { useRouter, useRoute } from 'vue-router' // 引入useRoute
import HomeCommendItem from '@/components/HomeCommendItem.vue'

// https://api.mall.leyifan.com/api/front/products/mercari?keyword=SEVENTEEN&toTranslate=0
export default defineComponent({
  components: {
    HomeCommendItem,
  },
  setup() {
    const storename = ref('mercari')
    const searchname = ref('mercari')
    const storeimg = ref(
      'https://image1.leyifan.cn/reborn-mall-cdn/crmebimage/public/config/2024/12/12/d533b2efe4b34dc4bcd77f8e63dce59ebaq9l2l0n4.png'
    )
    const checked = ref(false)
    const checked1 = ref(false)
    const isShow = ref(true)
    const list = ref([])
    const siteList = ref([])
    const showLeft = ref(false)
    const router = useRouter()
    const route = useRoute() // 初始化route对象
    const searchlist = ref([])
    const searchlist2 = ref([])
    const searchlist3 = ref([])
    const searchlist4 = ref([])
    const searchlist5 = ref([])
    const inputValue = ref('')
    const historyList = ref<string[]>(JSON.parse(localStorage.getItem('historyList') || '[]'))
    const active = ref(0)

    const onTabChange = (index: number) => {
      switch (index) {
        case 1:
          fetchDataForPopularity()
          break
        case 2:
          fetchDataForLatest()
          break
        case 3:
          fetchDataForprPrice()
          break
      }
    }

    const fetchDataForPopularity = () => {
      // 发起人气内容的请求
      // https://api.mall.leyifan.com/api/front/products/mercari?keyword=${inputValue.value}&toTranslate=0&colorId=&timeSale=false
      axios
        .get(
          `https://api.mall.leyifan.com/api/front/products/mercari?keyword=${inputValue.value}&toTranslate=0&colorId=&timeSale=false`
        )
        .then((res) => {
          console.log(res)
          searchlist2.value = res.data.data.list
        })
    }
    const fetchDataForLatest = () => {
      // 发起最新内容的请求
      // console.log('11111111112222')
      axios
        .get(
          `https://api.mall.leyifan.com/api/front/products/mercari?keyword=${inputValue.value}&toTranslate=0&marketplace=2`
        )
        .then((res) => {
          console.log(res.data.data.list)
          searchlist3.value = res.data.data.list
        })
    }
    const fetchDataForprPrice = () => {
      // 发起价格内容的请求
      console.log('11111111112222')
      axios
        // https://api.mall.leyifan.com/api/front/products/mercari?keyword=SEVENTEEN&salesOrder=&toTranslate=0&marketplace=3
        .get(
          `https://api.mall.leyifan.com/api/front/products/mercari?keyword=${inputValue.value}&salesOrder=&toTranslate=0&marketplace=3`
        )
        .then((res) => {
          console.log(res.data.data.list)
          searchlist4.value = res.data.data.list
        })
    }
    const gotoHome = () => {
      if (isShow.value == false) {
        isShow.value = true
      } else {
        router.back()
      }
    }

    const isSearch = computed(() => historyList.value.length > 0)

    const storefun = (name, ser, img) => {
      storename.value = name
      searchname.value = ser
      storeimg.value = img
      console.log(storename.value, searchname.value, storeimg.value)
      showLeft.value = false
    }

    const showPopup = () => {
      showLeft.value = true
    }

    const handleHotSearch = (title: string) => {
      inputValue.value = title
      searchfun()
    }

    const handleHistorySearch = (title: string) => {
      inputValue.value = title
      searchfun()
    }

    const removeHistoryItem = (item: string) => {
      historyList.value.splice(historyList.value.indexOf(item), 1)
      localStorage.setItem('historyList', JSON.stringify(historyList.value))
    }

    const clearHistory = () => {
      historyList.value = []
      localStorage.removeItem('historyList')
    }

    const searchfun = () => {
      console.log(inputValue.value)
      if (inputValue.value == '') {
        showToast('请输入关键词')
      } else {
        axios
          .get(
            `https://api.mall.leyifan.com/api/front/products/${searchname.value}?keyword=${inputValue.value}&toTranslate=1`
          )
          .then((res) => {
            searchlist.value = res.data.data.list
            // console.log('sss', searchlist.value)
            isShow.value = false
            if (!historyList.value.includes(inputValue.value)) {
              historyList.value.unshift(inputValue.value)
              localStorage.setItem('historyList', JSON.stringify(historyList.value))
            }
            inputValue.value = ''
          })
      }
    }

    onMounted(async () => {
      try {
        const data = await axios.get('https://api.mall.leyifan.com/api/front/search/keyword')
        list.value = data.data.data
      } catch (error) {
        console.error('Error fetching data:', error)
      }
      try {
        axios.get('https://api.mall.leyifan.com/api/front/index/siteList').then((res) => {
          siteList.value = res.data.data
          // console.log('6尼玛', siteList.value)
        })
      } catch (error) {
        console.error('Error fetching data:', error)
      }

      // 检查URL中的keyword参数
      const keyword = route.query.keyword as string
      if (keyword) {
        inputValue.value = keyword
        searchfun()
      }
    })

    return {
      checked,
      checked1,
      list,
      showPopup,
      showLeft,
      siteList,
      gotoHome,
      searchfun,
      inputValue,
      isShow,
      handleHotSearch,
      historyList,
      handleHistorySearch,
      showToast,
      removeHistoryItem,
      clearHistory,
      searchlist,
      storename,
      storefun,
      searchname,
      storeimg,
      isSearch,
      onTabChange,
      active,
      searchlist2,
      searchlist3,
      searchlist4,
      searchlist5,
      fetchDataForprPrice,
    }
  },
})
</script>

<style lang="less" scoped>
#search {
  background-image: url(https://mall.leyifan.com/static/h5/new_images/common_bg.png);
  background-size: contain;
  background-color: #fff;
  background-size: 100% 250rem;
  background-repeat: no-repeat;
  min-height: 100vh;
  padding: 0;
  font-family: PingFangSC;
  padding-bottom: calc(49rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  .searchgood {
    overflow-y: none;
    width: 100%;
    min-height: 90vh;
    .top {
      width: 100%;
      height: 100rem;
      position: fixed;
      top: 0;
      z-index: 666;
      background-color: white;
      .top-top {
        box-sizing: border-box;
        width: 375rem;
        height: 42rem;
        min-height: 42rem;
        .top-top-backBtn {
          z-index: 100;
          position: absolute;
          left: 0;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          padding-left: 14rem;
          height: 42rem;
        }
        .title {
          height: 42rem;
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          .image {
            width: 95rem;
            height: 26rem;
          }
        }
      }
      .site-box {
        margin-top: 14rem;
        padding: 0rem 14rem 14rem 14rem;
        display: flex;
        background-color: white;
        .left {
          width: 102rem;
          min-width: 102rem;
          height: 42rem;
          background-color: rgba(51, 51, 51, 0.06);
          border-radius: 8rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 14rem 0;
          padding-right: 11rem;
          transition: background-color 0.1s ease-in-out;
          .siteText {
            font-size: 14rem;
            line-height: normal;
            color: #333;
            font-weight: 700;
            flex: 1;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            span {
              color: black;
            }
          }
          .siteImage {
            width: 14rem;
            min-width: 14rem;
            min-height: 14rem;
            height: 14rem;
            img {
              -webkit-touch-callout: none;
              -webkit-user-select: none;
              -moz-user-select: none;
              display: block;
            }
          }
        }
        .right {
          display: flex;
          margin-left: 10rem;
          background-color: rgba(51, 51, 51, 0.06);
          border-radius: 8rem;
          height: 42rem;
          align-items: center;
          flex: 1;
          padding-left: 10rem;
          padding-right: 11rem;
          transition: background-color 0.2s ease-in-out;
          .inp-svg {
            width: 22rem;
            height: 22rem;
            min-width: 22rem;
            min-height: 22rem;
            img {
              width: 22rem;
              height: 22rem;
            }
          }
          .uni-input-placeholder {
            top: auto !important;
            left: 0;
            color: grey;
            overflow: hidden;
            text-overflow: clip;
            white-space: pre;
            word-break: keep-all;
            // pointer-events: none;
            line-height: inherit;
            input {
              border: 0;
              font-size: 12.5rem !important;
              color: #c4c2c1;
              position: relative;
              display: block;
              height: 100%;
              background: none;
              color: inherit;
              opacity: 1;
              font: inherit;
              line-height: inherit;
              letter-spacing: inherit;
              text-align: inherit;
              text-indent: inherit;
              text-transform: inherit;
              text-shadow: inherit;
            }
          }
        }
      }
    }
    .tanslate-box {
      padding: 0 14rem;
      margin-top: 14rem;
      .uni-list {
        border-radius: 8rem;
        background: linear-gradient(rgba(255, 61, 88, 0.1), hsla(0, 0%, 100%, 0));
        padding: 6rem 10rem;
        li {
          list-style: none;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 12rem;
          color: #ff3d58;
          line-height: 12rem;
          height: 30rem;
        }
      }
    }
    .scroll_view {
      width: 100%;
      padding-top: 10rem;
      .scroll_view_content {
        width: 100%;
        height: 100%;
        .title {
          margin-top: 20rem;
          padding: 0 14rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 14rem;
          .left {
            display: flex;
            align-items: center;
            .img {
              margin-right: 4rem;
              width: 14rem;
              height: 14rem;
              img {
                width: 14rem;
                height: 14rem;
                display: block;
              }
            }
          }
          .right {
            width: 14rem;
            height: 14rem;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .list {
          display: flex;
          flex-wrap: wrap;
          padding-left: 14rem;
          padding-right: 24rem;
          position: relative;
          overflow: hidden;
          width: 100vw;
          box-sizing: border-box;
          .list-item {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 10rem;
            background-color: #fff;
            border: 1rem solid #eee;
            border-radius: 8rem;
            margin-bottom: 10rem;
            margin-right: 10rem;
            box-sizing: border-box;
            font-size: 12rem;
            line-height: 12rem;
            height: 32rem;
            overflow: hidden;
            max-width: 100%;
            li {
              border: 0;
              line-height: 12rem;
              margin-bottom: 0;
            }
          }
          li {
            list-style: none;
            background-color: #333;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 14rem;
            background-color: #fff;
            border: 1rem solid #eee;
            border-radius: 8rem;
            margin-bottom: 10rem;
            margin-right: 10rem;
            box-sizing: border-box;
            font-size: 12rem;
            line-height: 12rem;
            height: 32rem;
            overflow: hidden;
            max-width: 100%;
            position: relative;
            span {
              width: 15rem;
              height: 30rem;
              position: absolute;
              right: 0;
              font-size: 14rem;
              color: #c4c2c1;
              text-align: center;
              line-height: 30rem;
              z-index: 1000;
            }
          }
          .hot-item {
            background-image: url('https://mall.leyifan.com/static/h5/new_images/search_hot.png');
            background-size: cover; /* 或者其他合适的背景大小 */
            background-position: center; /* 背景图片居中 */
            background-size: 12rem 12rem;
            background-repeat: no-repeat;
            background-position: right center;
          }
        }
      }
    }
    .popup-box {
      overflow-x: none;
      .title {
        height: 42rem;
        min-height: 42rem;
        padding: 12rem 13rem;
        display: flex;
        .left {
          box-sizing: border-box;
        }
        .name {
          text-align: center;
          flex: 1;
          color: #333;
          font-weight: 700;
        }
        .seat {
          width: 22rem;
          height: 22rem;
        }
      }
      .scroll-view-box {
        ul {
          padding: 16rem 14rem 0;
          box-sizing: border-box;
          li {
            width: 283rem;
            height: 96rem;
            border-radius: 8rem;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin-top: 10rem;
            position: relative;
            transition: background-color 0.2s ease-in-out;
            overflow-x: none;
            position: relative;
            img {
              max-width: 95%;
              width: 283rem;
              height: 96rem;
            }
            span {
              position: absolute;
              font-size: 12rem;
              line-height: 12rem;
              color: #fff;
              font-weight: 400;
              position: absolute;
              bottom: 26rem;
              left: 20rem;
            }
            .tag {
              background-image: url();
              position: absolute;
              right: 13rem;
              top: 0;
              height: 28rem;
              width: 84rem;
              z-index: 2;
              background-size: 100% 100%;
              background-repeat: no-repeat;
              color: #fff;
              font-size: 10rem;
              line-height: 10rem;
              font-weight: 500;
              text-align: right;
              padding: 5rem 19rem 0 0;
              background-image: url();
            }
          }
        }
      }
    }
    .listItem {
      margin-top: 100rem;
      .tanslate-row {
        padding-top: 8rem;
        text-align: center;
        li {
          list-style: none;
          font-size: 11rem;
          color: #aaa;
        }
        li:nth-child(2) {
          margin: 11rem 0;
        }
      }
      .box {
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-evenly;
      }
      .box2 {
        padding-top: 83rem;
        .imgIcon {
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          img {
            width: 115rem;
            height: 115rem;
          }
        }
      }
    }
  }
}
</style>